<template>
	<div class="login">
		<div class="main-box" ref="box">
			<div class="form">
				<h2 class="title">实验室监控平台登录</h2>
				<input class="form_input" type="text" placeholder="请输入用户名" autocomplete="off"
					v-model.trim="form.username" />
				<input class="form_input" type="password" placeholder="请输入密码" autocomplete="off"
					v-model.trim="form.password" />
				<div class="control">
					<button class="control_btn" type="submit" @click="onLogin">立即登录</button>
					<button class="control_btn" type="reset" @click="onReset">重置</button>
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ILoginUserForm } from "@/apis/types"
import { useElLoading } from "@/hooks/useElLoading";
import { reactive, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

const store = useStore()
const router = useRouter()

const form = reactive<ILoginUserForm>({
	username: "",
	password: "",
})
const onLogin = (): void => {
	store.dispatch("permission/onLogin", form)
}
const onReset = (): void => {
	form.username = ""
	form.password = ""
}

watch(
	() => store.state.permission.token,
	() => {
		const box = ref<HTMLDivElement>(null)
		const boxLoading = useElLoading().service(box.value)
		setTimeout(() => {
			router.push("/home")
			boxLoading.close()
		}, 500)
	}
)
</script>
<style scoped lang="less">
.control {
	width: 40%;
	display: flex;
	justify-content: space-around;

	button {
		border: none;
		width: 120px;
	}
}

.login {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.main-box {
	width: 1000px;
	min-width: 1000px;
	min-height: 600px;
	height: 600px;
	padding: 25px;
	margin-top: -100px;
	background-color: #ecf0f3;
	box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;

	.form {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: 100%;
		color: #a0a5a8;

		.title {
			font-size: 34px;
			font-weight: 700;
			line-height: 3;
			color: #181818;
		}

		.form_input {
			width: 350px;
			height: 40px;
			margin: 4px 0;
			padding-left: 25px;
			font-size: 13px;
			letter-spacing: 0.15px;
			border: none;
			outline: none;
			// font-family: 'Montserrat', sans-serif;
			background-color: #ecf0f3;
			transition: 0.25s ease;
			border-radius: 8px;
			box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;

			&::placeholder {
				color: #a0a5a8;
			}
		}
	}
}

.control_btn {
	width: 180px;
	height: 50px;
	border-radius: 25px;
	margin-top: 50px;
	text-align: center;
	line-height: 50px;
	font-size: 14px;
	letter-spacing: 2px;
	background-color: #4b70e2;
	color: #f9f9f9;
	cursor: pointer;
	box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;

	&:hover {
		box-shadow: 4px 4px 6px 0 rgb(255 255 255 / 50%), -4px -4px 6px 0 rgb(116 125 136 / 50%),
			inset -4px -4px 6px 0 rgb(255 255 255 / 20%), inset 4px 4px 6px 0 rgb(0 0 0 / 40%);
	}
}
</style>
